// src/components/DepartmentSidebar.tsx
import { ApartmentOutlined } from '@ant-design/icons';
import { List, Typography } from 'antd';
import React, { useState } from 'react';
import './DepartmentSidebar.scss'; // 确保样式文件路径正确

const { Text } = Typography;

const departmentData = [
  { title: '智链Link·13', icon: <ApartmentOutlined style={{ fontSize: '20px',marginLeft:'20px' }} /> },
  { title: '前端组', icon: <ApartmentOutlined style={{ fontSize: '20px',marginLeft:'40px' }} /> },
];

const DepartmentSidebar: React.FC = () => {
  const [selectedKey, setSelectedKey] = useState<number | null>(null); // 用于保存选中的项的索引

  return (
    <div className="department-sidebar">
      <Text strong className="department-title">部门</Text>
      <List
        itemLayout="horizontal"
        dataSource={departmentData}
        renderItem={(item, index) => (
          <List.Item
            className="department-item"
            style={{
              marginTop: '10px',
              backgroundColor: selectedKey === index ? '#e6f7ff' : 'transparent', // 设置背景颜色
              color: selectedKey === index ? '#1890ff' : 'inherit', // 设置文字颜色
              cursor: 'pointer', // 鼠标悬停时显示手指图标
            }}
            onClick={() => setSelectedKey(index)} // 点击后设置选中项的索引
          >
            <List.Item.Meta
              avatar={
                <div
                  className="department-icon"
                  style={{ color: selectedKey === index ? '#1890ff' : 'inherit' }} // 设置图标颜色
                >
                  {item.icon}
                </div>
              }
              title={<Text style={{ color: selectedKey === index ? '#1890ff' : 'inherit' }}>{item.title}</Text>} // 设置标题颜色
            />
          </List.Item>
        )}
      />
    </div>
  );
};

export default DepartmentSidebar;
